import { Button } from "antd";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import React, { useMemo, useRef } from "react";


const usePrint = (element: React.RefObject<HTMLElement>) => {
    const size = useMemo(() => {
        const tmpNode = document.createElement('DIV');
        tmpNode.style.cssText = 'width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden';
        document.body.appendChild(tmpNode);
        const xdpi = tmpNode.offsetWidth;
        const ydpi = tmpNode.offsetHeight;
        tmpNode.parentNode!.removeChild(tmpNode);
        const width = xdpi / 2.54 * 21;
        const height = ydpi / 2.54 * 29.7;
        return { width, height }
    }, [])
    return {
        size,
        toBlob: () => {
            console.log(123, window.devicePixelRatio);
            html2canvas(element.current!, {
                scale: window.devicePixelRatio,
                width: size.width,
                height: size.height
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/png', 1.0);
                // eslint-disable-next-line new-cap
                const pdf = new jsPDF('p', 'mm', 'a4', false);
                pdf.addImage(imgData, 'PNG', 0, 0, 210, 297, 'FAST', 'FAST')
                const blob = pdf.output('blob');
                const url = URL.createObjectURL(blob);
                window.open(url);
                // 创建实例对象
                // zip.file(`${element.title}学生二维码.pdf`, blob, { binary: true })
                // resolve(true);
            })

            // console.log(123123, element);
            // const doc = new jsPDF("p", "mm", "a4");
            // const _html = `<body>${element.current!.innerHTML}</body>`;
            // console.log(element.current, _html);
            // doc.html(element.current!, {
            //     width: size.width,
            //     callback: pdf => {
            //         const blob = pdf.output('blob');
            //         const url = URL.createObjectURL(blob);
            //         window.open(url);
            //     },
            // });
        },
    }
}

const Pdfpage = () => {
    const divRef = useRef<HTMLDivElement>(null);
    const print = usePrint(divRef);
    const _boxstyle: React.CSSProperties = {
        width: "50%",
        height: "20%",
        display: "inline-block",
        boxSizing: "border-box",
        background: "#ededed",
    };
    const _wrapstyle: React.CSSProperties = {
        width: "100%",
        height: "100%",
        boxSizing: "border-box",
        background: "#ffffff"
    };
    return <div>
        <Button onClick={() => print.toBlob()}>点击事件</Button>
        <div ref={divRef} style={{ width: print.size.width, height: print.size.height }} >
            <div style={{ fontSize: 14, height: 297 }} >
                <div style={_boxstyle} >
                    <div style={_wrapstyle} >
                        123123
                    </div>
                </div>
                <div style={{ width: "50%", display: "inline-block" }} >
                    555555
                </div>
                <div style={{ width: "50%", display: "inline-block" }} >
                    987639
                </div>
            </div>
        </div>
    </div >
}

export default Pdfpage;